<template>
  <aigc-card class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
      <!-- <img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
        alt="Your Company"> -->

      <h2 class="mt-1 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">AIGC 登录</h2>
    </div>

    <div class=" sm:mx-auto sm:w-full sm:max-w-sm p-5 pb-0">
      <el-form ref="loginFormRef" 
      :model="loginForm"
      :rules="loginRules"
      >
        <el-form-item prop="account" >
          <el-input v-model="loginForm.account" autocomplete="off"
          placeholder="用户名"
          size="large"
          >
            <template #prefix>
              <el-icon>
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd" >
          <el-input v-model="loginForm.pwd" type="password" autocomplete="off"  placeholder="密码" size="large">
            <template #prefix>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item class="sm:w-full flex flex-row-reverse basis-7">
          <el-button type="primary" @click="submitForm(loginFormRef)" class="w-full" size="large">
            登录
          </el-button>

        </el-form-item>
      </el-form>
    </div>
  </aigc-card>
</template>
<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue'
import { useUserStore } from '@/store'
import {useRouter} from 'vue-router';
import { ILogin } from '@/interface';

const router = useRouter()
const loginRules =reactive<FormRules>( {
  account: [
    { required: true, message: '用户名不能为空！', trigger: 'blur' },
],
pwd:[
    { required: true, message: '密码不能为空！', trigger: 'blur' },
],
})
const loginFormRef = ref<FormInstance>()
const userStore = useUserStore()
const loginForm = reactive<ILogin>({account:"",pwd:""})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl){ 
    Object.assign(loginForm,{})
    return
  }
  formEl.validate(async (valid) => {
    if (valid) { 
      
     const loginStatus = await userStore.login(loginForm)
      if(loginStatus){
        router.push({ path: "/home" })
      }
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>